{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
}}

<div class="namespace-picker side-padding-4" ...attributes>
  <Hds::Dropdown @enableCollisionDetection={{true}} as |D|>

    <D.ToggleButton @icon="org" @text={{or this.selected.id "-"}} @isFullWidth={{true}} data-test-namespace-toggle />

    {{#if this.errorLoadingNamespaces}}

      <D.Header>
        <MessageError @errorMessage={{this.errorLoadingNamespaces}} />
      </D.Header>

    {{else}}

      <D.Header class="is-paddingless" @hasDivider={{true}}>
        <div class="has-padding-8">
          <Hds::Form::TextInput::Field
            @value={{this.searchInput}}
            @type="search"
            aria-label="Search namespaces"
            placeholder="Search"
            {{on "keydown" this.onKeyDown}}
            {{on "input" this.onSearchInput}}
            {{did-insert this.focusSearchInput}}
          />
        </div>
      </D.Header>

      <D.Header class="is-paddingless">
        {{#if (and this.hasSearchInput (not this.showNoNamespacesMessage))}}
          <div class="sub-text is-marginless has-top-padding-xs left-padding-16" {{did-insert this.adjustElementWidth}}>
            {{this.searchInputHelpText}}
          </div>
        {{/if}}

        <div class="is-size-8 has-text-black has-text-weight-semibold left-padding-16 top-padding-10">
          {{this.namespaceLabel}}
          <Hds::BadgeCount @text={{or this.namespaceCount 0}} />
        </div>
      </D.Header>

      {{#if this.showNoNamespacesMessage}}
        <D.Generic class="sub-text is-marginless" {{did-insert this.adjustElementWidth}}>
          {{this.noNamespacesMessage}}
        </D.Generic>
      {{/if}}

      <div class="is-overflow-y-auto is-max-drawer-height" {{did-insert this.setupScrollListener}}>
        {{#each this.visibleNamespaceOptions as |option|}}
          <D.Checkmark
            @selected={{eq option.id this.selected.id}}
            {{on "click" (fn this.onChange option)}}
            data-test-namespace-link={{option.path}}
          >
            <span class="is-fullwidth is-word-break right-padding-4">{{option.label}}</span>
          </D.Checkmark>
        {{/each}}
      </div>

    {{/if}}

    <D.Footer @hasDivider={{true}} class="is-flex-center">
      <Hds::ButtonSet class="is-fullwidth">
        {{#if this.canRefreshNamespaces}}
          <Hds::Button
            @color="secondary"
            @text="Refresh list"
            @isFullWidth={{(not this.canManageNamespaces)}}
            @icon="reload"
            @size="small"
            {{on "click" this.refreshList}}
            data-test-refresh-namespaces
          />
        {{/if}}
        {{#if this.canManageNamespaces}}
          <Hds::Button
            @color="tertiary"
            @text="Manage"
            @isFullWidth={{(not this.canRefreshNamespaces)}}
            @icon="settings"
            @size="small"
            @route="vault.cluster.access.namespaces"
            data-test-manage-namespaces
          />
        {{/if}}
      </Hds::ButtonSet>

    </D.Footer>

  </Hds::Dropdown>
</div>